<template>
  <div class="water-fall">
    <card class="water-fall-card"
          v-for="(val, i) in src"
          v-show="false"
          :key="i"
          :cover="val"
          :width="cardStyle1.width">
      <div class="water-fall-cover" slot='cover'>
        <img class="water-fall-img" :src="val" @load="isImgOnload(i)"/>
      </div>
    </card>
  </div>
</template>

<script>
  import cardConfig from '../config/cardConfig';
  import card from '../card/card';
  import {WaterFall} from './waterFall.js';
  export default {
    name: "waterFall",
    data:function(){
      return {
        cardStyle1:{
          width: 100
        },
        containerWidth:0,
        column:5,
        count:0,
        currentSrcIndex:0,
        waterFall:{},
        lists:[],
        src:[]
      }
    },
    mounted:function(){
      this.containerWidth = Number(window.getComputedStyle(this.$el).width.replace('px',''));
      const width = this.getWidth();
      // console.log(this);
      this.waterFall =
        new WaterFall(this, width, this.lists, this.column);
      this.setImgSrcTest(this.currentSrcIndex, this.column);


    },
    methods:{
      getTest(){

      },
      /**
       * 图片被载入后执行
       */
      isImgOnload:function(i){
        this.lists = this.addList(i);
        this.instanceWaterFall(this.lists);
        if(i%(this.column-1)===0&&((this.count)*this.column<cardConfig.length*3)){
          this.count++;
          this.setImgSrcTest(this.currentSrcIndex, this.column*this.count);
        }
      },
      setImgSrc:function(){
        for(let i=0,length=cardConfig.length;i<length;i++){
          this.src.push(cardConfig[i]);
        }
      },
      /**
       * 每次加载与可摆放列数相等的图片
       * @param {number} begin
       * @param {number} end
       * @return {number} begin
       */
      setImgSrcTest:function(begin, end) {
        let index=0;
        for (;begin<end;begin++) {
          index = Math.floor(Math.random()*(cardConfig.length-1));
          this.src.push(cardConfig[index]);
        }
        this.currentSrcIndex = begin;
        return begin;
      },
      addList:function (id) {
        let lists = this.lists;
        let children = this.$children;
        let width = this.getWidth();
        lists.push({
          el:children[id].$el,
          top:0,
          left:0,
          width,
          isPosition:false,
          id
        });
        return lists;
      },
      setImgStyle:function(target){
        for(let i=0,length=target.length;i<length;i++){
          target[i].el.style.width = target[i].width+'px';
          target[i].el.style.transform =
            "translate3d("+target[i].left+"px,"+target[i].top+"px,0)";
          target[i].el.style.position = 'absolute';
        }
        return target;
      },
      instanceWaterFall:function (lists) {
        // debugger;
        this.setImgStyle(this.waterFall.position(lists,{offsetTop:5}));
      },
      getWidth:function(){
        return this.cardStyle1.width;
      }
    },
    components:{
      card
    }
  }
</script>

<style scoped>
  .water-fall{
    position: absolute;
    display: inline-block;
    width: 100%;
  }
  .water-fall-cover{
    width: 100%;
    overflow: hidden;
  }
  .water-fall-img:hover {
    transform: scale(1.2,1.2);
    transition: transform 0.3s;
  }
  .water-fall-img{
    transform: scale(1,1);
    transition: transform 0.3s;
  }
</style>
